<template>
  <div v-for="item in props.menuList" :key="item.path">
    <el-sub-menu
      v-if="item.children?.length"
      :index="item.path"
      popper-class="aside-menu-sub"
      :style="{ '--arrowIcon': !props.isCollapse ? 'block' : 'none' }"
    >
      <template #title>
        <el-icon v-if="item.meta.icon">
          <component :is="item.meta.icon" />
        </el-icon>
        <span v-show="!props.isCollapse">{{ $t(item.meta.i18n) }}</span>
      </template>
      <menu-item-deal :menuList="item.children"></menu-item-deal>
    </el-sub-menu>
    <router-link v-else :to="item.path" class="nav-router-link">
      <el-menu-item :index="item.path">
        <el-icon v-if="item.meta.icon">
          <component :is="item.meta.icon" />
        </el-icon>
        <span v-show="!props.isCollapse">{{ $t(item.meta.i18n) }}</span>
      </el-menu-item>
    </router-link>
  </div>
</template>
<script setup>
const props = defineProps({
  isCollapse: {
    type: Boolean,
    default: () => false,
  },
  menuList: {
    type: Array,
    default: () => [],
  },
});
</script>
<style lang="scss" scoped>
.nav-router-link {
  text-decoration: none;
}
.el-sub-menu {
  :deep(.el-sub-menu__title) {
    @include bg_color("bg_color");
  }
  :deep(.el-menu-item) {
    @include bg_color("bg_color");
    &:hover {
      @include hover_bg_color("hover_bg_color");
    }
  }
  :deep(.el-icon) {
    &.el-sub-menu__icon-arrow {
      display: var(--arrowIcon) !important;
    }
  }
}
.el-menu-item {
  @include bg_color("bg_color");
  @include text_color("text_color");
  &:hover {
    @include hover_bg_color("hover_bg_color");
  }
  &.is-active {
    @include active_text_color("active_text_color");
    font-weight: bold;
  }
}
</style>

<style lang="scss">
.aside-menu-sub {
  .el-menu {
    @include bg_color("bg_color");
  }
}
</style>
